<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card>
        <!-- 顶部 -->
        <TreeTool
          :is-company="true"
          :node-data="companyInfo"
          @showAddDialog="showAddDialog"
        />
        <hr>
        <!-- 树状 -->
        <el-tree
          :data="depts"
          :props="{label:'name'}"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template v-slot="scoped">
            <TreeTool
              :is-company="false"
              :node-data="scoped.data"
              @showAddDialog="showAddDialog"
              @showEditDialog="showEditDialog"
              @reloadPage="getDepts"
            />
          </template>
        </el-tree>
      </el-card>
      <AddDepts ref="addDiaLog" :node-data="nodeData" :is-show-dialog="isShowDialog" @reloadPage="getDepts" @closeDialog="isShowDialog=false" />

    </div>
  </div>
</template>

<script>
import TreeTool from './component/tree-tools.vue'
import { getDepts } from '@/api/departments'
import AddDepts from './component/app-depts.vue'
export default {
  components: {
    TreeTool,
    AddDepts
  },
  data() {
    return {
      isShowDialog: false,
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''

      },
      depts: [],
      nodeData: {}
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    async getDepts() {
      console.log(111)
      const res = await getDepts()
      this.depts = this.listToTreeData(res.data.depts, '')
      console.log(res.data.depts)
    },
    listToTreeData(list, id) {
      const res = []
      list.forEach(element => {
        if (element.pid === id) {
          element.children = this.listToTreeData(list, element.id)
          res.push(element)
        }
      })
      return res
    },
    showAddDialog(nodeData) {
      this.nodeData = nodeData
      this.isShowDialog = true
    },
    showEditDialog(nodeData) {
      this.nodeData = nodeData
      this.$refs.addDiaLog.getDepartDetail(nodeData.id)
      this.isShowDialog = true
    }

  }

}
</script>

<style>

</style>
